<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<navbar v-bind="{data:data}" @navigatorClick="navigatorClick"></navbar>
				<shopping-cart v-bind="{data:data}" @clearShoppingCart="clearShoppingCart" @jia="jia" @jian="jian" @hideShoppingCart="hideShoppingCart" @shoppingCartListModel="shoppingCartListModel" @buynow="buynow"></shopping-cart>
				<specifications-model v-bind="{data:data}" @hideModal="hideModal" @close_box="close_box" @attrClick="attrClick" @guigejian="guigejian" @goodNumChange="goodNumChange" @onConfirm="onConfirm"></specifications-model>
        <view :class="['quick_purchase', data._navbar?'shopping-cart':'']">
            <view :class="[data.__device, 'left_nav']">
                <scroll-view scrollY="true" style="height: 100%;width:100%" v-if="data.quick_list">
                    <view @tap="selectMenu" :class="['cat_name', data.cat_checked?'cat_name_active':'']" data-tag="hot_cakes" v-if="data.quick_hot_goods_lists.length>0">
                        <image class="quick-hot" :src="data.__wxapp_img.dapp.quick_hot.url"></image>
                        <view style="float:left; height:30px;display:flex;align-items:center;justify-content:center;">热销</view>
                    </view>
                    <view @tap="selectMenu" :class="['cat_name', item.cat_checked?'cat_name_active':'']" :data-id="data.quick_list.id" :data-index="index" :data-tag="'aa'+index" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" v-for="(item,index) in data.quick_list" :key="item.id">{{item.name}}</view>
                </scroll-view>
            </view>
            <view :class="[data.__device, 'r_goods']">
                <scroll-view :scrollIntoView="data.toView" scrollY="true" style="height: 100%;padding: 10upx">
                    <block v-if="data.quick_hot_goods_lists.length>0">
                        <view class="navname" id="hot_cakes">热销</view>
                        <view class="goodsall" v-for="(goods,index) in data.quick_hot_goods_lists" :key="goods.id">
                            <view @tap="get_goods_info" class="goods" :data-id="goods.id">
                                <view class="goods_pic">
                                    <image id="goods_pic" lazyLoad="true" :src="goods.cover_pic"></image>
                                </view>
                                <view class="goods_info">
                                    <view class="goods_name" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{{goods.name}}</view>
                                    <view style="font-size:24upx;color:#666666;margin-top:14upx;" v-if="data.__is_sales">销量 {{goods.virtual_sales}}</view>
                                    <view style="font-size:16px;color:#ff4544;margin-top:22upx;width:63%;">￥{{goods.price}}</view>
                                </view>
                            </view>
                            <view class="purchase" v-if="goods.use_attr==0">
                                <view @tap="jia" class="standard" :data-id="goods.id" id="jia">
                                    <image class="standard" :src="data.__wxapp_img.dapp.jia.url" style="width:100%;"></image>
                                </view>
                                <block v-if="goods.num>0">
                                    <input @input="goodNumChange" class="standard good_num" :data-id="goods.id" id="num" maxlength="999" type="number" :value="goods.num"></input>
                                    <view @tap="jian" class="standard" :data-id="goods.id" id="jian">
                                        <image class="standard" :src="data.__wxapp_img.dapp.jian.url"></image>
                                    </view>
                                </block>
                            </view>
                            <view @tap="showDialogBtn" class="guigepurchase" :data-id="goods.id" v-if="goods.use_attr==1">选规格
                                        <view class="guigenum" v-if="goods.num>0">{{goods.num}}</view>
                            </view>
                        </view>
                    </block>
                    <block v-for="(goods_list,index) in data.quick_list" :key="goods_list.id">
                        <view class="navname" :id="'aa'+index">{{goods_list.name}}</view>
                        <view class="goodsall" v-for="(goods,i) in goods_list.goods" :key="goods.id">
                            <view @tap="get_goods_info" class="goods" :data-id="goods.id">
                                <view class="goods_pic">
                                    <image id="goods_pic" :src="goods.cover_pic"></image>
                                </view>
                                <view class="goods_info">
                                    <view class="goods_name" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{{goods.name}}</view>
                                    <view style="font-size:24upx;color:#666666;margin-top:14upx;" v-if="__is_sales">销量 {{goods.virtual_sales}}</view>
                                    <view style="font-size:16px;color:#ff4544;margin-top:22upx;width:63%;">￥{{goods.price}}</view>
                                </view>
                            </view>
                            <view class="purchase" v-if="goods.use_attr==0">
                                <view @tap="jia" class="standard" :data-id="goods.id" id="jia">
                                    <image class="standard" lazyLoad="true" :src="data.__wxapp_img.dapp.jia.url"></image>
                                </view>
                                <block v-if="goods.num>0">
                                    <input @input="goodNumChange" class="standard good_num" :data-id="goods.id" id="num" maxlength="999" type="number" :value="goods.num"></input>
                                    <view @tap="jian" class="standard" :data-id="goods.id" id="jian">
                                        <image class="standard" :src="data.__wxapp_img.dapp.jian.url"></image>
                                    </view>
                                </block>
                            </view>
                            <view @tap="showDialogBtn" class="guigepurchase" :data-cid="goods_list.id" :data-id="goods.id" :data-index="index" id="guige" v-if="goods.use_attr==1">选规格
                                        <view class="guigenum" v-if="goods.num>0">{{goods.num}}</view>
                            </view>
                        </view>
                    </block>
                </scroll-view>
            </view>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	var t = require("../../../components/shopping_cart/shopping_cart.js"), o = require("../../../components/specifications_model/specifications_model.js");
	import navbar from '../../../components/common/navbar.vue'
	import shoppingCart from '../../../components/shopping_cart/shopping_cart.vue'
	import specificationsModel from '../../../components/specifications_model/specifications_model.vue'
	export default {
		components:{navbar,shoppingCart,specificationsModel},
		data() {
			return {
				data: {
        quick_list: [],
        goods_list: [],
        carGoods: [],
        currentGood: {},
        checked_attr: [],
        checkedGood: [],
        attr_group_list: [],
        temporaryGood: {
            price: 0,
            num: 0,
            use_attr: 1
        },
        check_goods_price: 0,
        showModal: !1,
        checked: !1,
        cat_checked: !1,
        color: "",
        total: {
            total_price: 0,
            total_num: 0
        }
    },
			};
		},
		onLoad: function(t) {myVue = this;
        myVue.getApp.page.onLoad(this, t);
    },
    onShow: function() {
        myVue.getApp.page.onShow(this), t.init(this), o.init(this, t), this.loadData();
    },
    onHide: function() {
        myVue.getApp.page.onHide(this), t.saveItemData(this);
    },
    onUnload: function() {
        myVue.getApp.page.onUnload(this), t.saveItemData(this);
    },
		onShareAppMessage: function(t) {
        myVue.getApp.page.onShareAppMessage(this);
        var o = this;
        return {
            path: "/pages/quick-purchase/index/index?user_id=" + myVue.getApp.core.getStorageSync(myVue.getApp.const.USER_INFO).id,
            success: function(t) {
                1 == ++share_count && o.shareSendCoupon(o);
            }
        };
    },
		methods: {
			loadData: function(t) {
        var o = this, a = myVue.getApp.core.getStorageSync(myVue.getApp.const.ITEM), e = {
            total_num: 0,
            total_price: 0
        };
        o.setData({
            total: void 0 !== a.total ? a.total : e,
            carGoods: void 0 !== a.carGoods ? a.carGoods : []
        }), myVue.getApp.core.showLoading({
            title: "加载中"
        }), myVue.getApp.request({
            url: myVue.getApp.api.quick.quick,
            success: function(t) {
                if (o.getApp.core.hideLoading(), 0 == t.code) {
                    var e = t.data.list, s = [], i = [];
                    for (var c in e) if (e[c].goods.length > 0) {
                        i.push(e[c]);
                        for (var n in e[c].goods) {
                            var d = o.data.carGoods;
                            for (var r in d) a.carGoods[r].goods_id === parseInt(e[c].goods[n].id) && (e[c].goods[n].num = e[c].goods[n].num ? e[c].goods[n].num : 0, 
                            e[c].goods[n].num += a.carGoods[r].num);
                            parseInt(e[c].goods[n].hot_cakes) && s.push(e[c].goods[n]);
                        }
                    }
                    o.setData({
                        quick_hot_goods_lists: s,
                        quick_list: i
                    });
                }
            }
        });
    },
    get_goods_info: function(t) {
        var o = this, a = o.data.carGoods, e = o.data.total, s = o.data.quick_hot_goods_lists, i = o.data.quick_list, c = {
            carGoods: a,
            total: e,
            quick_hot_goods_lists: s,
            check_num: o.data.check_num,
            quick_list: i
        };
        myVue.getApp.core.setStorageSync(myVue.getApp.const.ITEM, c);
        var n = t.currentTarget.dataset.id;
        myVue.getApp.core.navigateTo({
            url: "/pages/goods/goods?id=" + n + "&quick=1"
        });
    },
    selectMenu: function(t) {
        var o = t.currentTarget.dataset, a = this.data.quick_list;
        if ("hot_cakes" == o.tag) for (var e = !0, s = a.length, i = 0; i < s; i++) a[i].cat_checked = !1; else {
            for (var c = o.index, s = a.length, i = 0; i < s; i++) a[i].cat_checked = !1, a[i].id == a[c].id && (a[i].cat_checked = !0);
            e = !1;
        }
        this.setData({
            toView: o.tag,
            quick_list: a,
            cat_checked: e
        });
    },
		close_box: function(t) {
        this.setData({
            showModal: !1
        });
    },
    hideModal: function() {
        this.setData({
            showModal: !1
        });
    }
		},
	}
</script>

<style scoped>

.quick_purchase {
    height: 100vh;
    width: 100%;
    background: #fafafa;
}

.shopping-cart {
    padding-bottom: 115upx;
}

.left_nav {
    height: 100%;
    width: 20%;
    float: left;
    padding-bottom: 130upx;
    background: #f3f3f3;
}

.device_iphone_x.left_nav {
    padding-bottom: 195upx;
}

.cat_name {
    height: 100upx;
    width: 100%;
    font-size: 12px;
    color: #353535;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat_name_active {
    background: #fafafa;
    color: #ff4544;
}

.quick-hot {
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
    background-size: 90%;
    float: left;
    margin-right: 6px;
}

.r_goods {
    height: 100%;
    width: 78%;
    float: right;
    padding-bottom: 130upx;
}

.device_iphone_x.r_goods {
    padding-bottom: 195upx;
}

.navname {
    font-size: 11px;
    color: #666;
    width: 100%;
    padding-top: 14px;
    padding-bottom: 14px;
}

.goodsall {
    height: 174upx;
    width: 100%;
    border-bottom: 1upx solid #e6e6e6;
    position: relative;
}

.goods {
    height: 152upx;
    margin-top: 22upx;
    width: 100%;
}

.goods_pic {
    width: 27%;
    height: 100%;
    float: left;
}

#goods_pic {
    width: 100%;
    height: 100%;
}

.goods_info {
    width: 70%;
    height: 100%;
    margin-right: 1%;
    float: right;
}

.goods_name {
    font-size: 28upx;
    color: #353535;
    margin-top: 10upx;
    font-weight: bold;
}

.guigenum {
    position: absolute;
    bottom: 60%;
    left: 77%;
    width: 35upx;
    height: 25upx;
    border-radius: 40%;
    border: 1upx solid red;
    color: red;
    background: #fff;
    font-size: 16upx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.purchase {
    position: absolute;
    right: 1%;
    bottom: 10upx;
    z-index: 100;
    height: 50upx;
}

.guigepurchase {
    position: absolute;
    right: 1%;
    bottom: 10upx;
    z-index: 100;
    height: 50upx;
    width: 22%;
    color: #ffe5e5;
    background: #ff4544;
    font-size: 26upx;
    border-radius: 26upx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guige {
    position: relative;
    width: 136upx;
    height: 45upx;
    bottom: 30%;
    left: 68%;
}

.page /deep/ .show-btn {
    margin-top: 100upx;
    color: #2c2;
}

.page /deep/ .modal-mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: var(--window-top);
    left: 0;
    background: #000;
    opacity: 0.5;
    overflow: hidden;
    z-index: 2222;
    color: #fff;
}

.page /deep/ .guigeshu {
    border-radius: 100%;
    width: 55upx;
    height: 55upx;
    background-repeat: no-repeat;
    background-size: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page /deep/ .btn-confirm {
    width: 50%;
    color: #ec5300;
    text-align: center;
}

.page /deep/ .navbar+.quick_purchase {
    padding-bottom: 115upx;
}

.page /deep/ .navbar+.quick_purchase #goods_car {
    bottom: 115upx;
}

.page /deep/ .navbar.device_iphone_x {
    padding-bottom: 65upx;
}

.page /deep/ .navbar.device_iphone_x~.quick_purchase {
    padding-bottom: 180upx;
}

.page /deep/ .navbar.device_iphone_x~.quick_purchase #goods_car {
    bottom: 180upx;
}
</style>
